<template>
	<div>
		<div class="app-container">
			<div id="printArea">

				<div class="page-a5" v-for="(one,oindex) in listData" :key="oindex">
					<section>
						<div class="zd-line">
							<div class="zd-line-text">
								<div class="zd-line-text-item">装</div>
								<div class="zd-line-text-item">订</div>
								<div class="zd-line-text-item">线</div>
							</div>
						</div>

						<div class="main-box">
							<div class="b1">
								<span class="tite">费 用 报 销 单</span>
								<div class="tite-line"></div>
								<div class="tite-line"></div>
							</div>
							<div class="bh">
								<span class="bh-num">编号：{{rowData.businessCode}}</span>
							</div>

							<div class="table-t">
								<div class="table-item h16">报销部门：{{rowData.deptName}}</div>
								<div class="table-item table-item-flex h16">
									<div class="table-date">
										{{parseTime(rowData.businessDate, '{y}')}}
										<span style="margin: 0 8px;">年</span>
									</div>
									<div class="table-date">
										{{parseTime(rowData.businessDate, '{m}')}}
										<span style="margin: 0 8px;">月</span>
									</div>
									<div class="table-date">
										{{parseTime(rowData.businessDate, '{d}')}}
										<span style="margin: 0 8px;">日</span>
									</div>
								</div>
								<div class="table-item text h16">
									单据及附件共<span class="text-line"></span>张
								</div>
							</div>

							<table>
								<tbody>
									<tr>
										<td class="w55 h16">报销项目</td>
										<td class="h16">摘要</td>
										<td class="w45 h16">金额</td>
										<td rowspan="2" class="w10 h16">备注</td>
										<td rowspan="2" class="w55 s14">{{rowData.remarks}}</td>
									</tr>
									<tr v-for="(item,index) in one.list" :key="index">
										<td class="s14">{{item.projectDictLabel}}</td>
										<td class="s14 tc">{{item.purpose}}</td>
										<td class="s14">
											<span v-if="item.amount > 0">￥{{item.amount.toFixed(2)}}</span>
										</td>
										<td class="h16" v-if="((index + 1) + 1) % 3 == 0" :rowspan="3">
											<span v-if="((index + 1) + 1) / 3 == 1">领导审批</span>
											<span v-if="((index + 1) + 1) / 3 == 2">部门审批</span>
										</td>
										<td v-if="((index + 1) + 1) % 3 == 0" :rowspan="3">
											<span class="s14" v-if="((index + 1) + 1) / 3 == 1">
												<span v-if="rowData.leaderUser !== undefined">
													{{rowData.leaderPass == 0?'驳回':'同意'}}<br>
													{{rowData.leaderUser.nickName}}<br>
													{{parseTime(rowData.leaderAuthTime, '{y}-{m}-{d}')}}
												</span>
											</span>
											<span class="s14" v-else>
												<span v-if="rowData.deptLeaderUser !== undefined">
													{{rowData.deptLeaderPass == 0?'驳回':'同意'}}<br>
													{{rowData.deptLeaderUser.nickName}}<br>
													{{parseTime(rowData.deptLeaderAuthTime, '{y}-{m}-{d}')}}
												</span>
											</span>
										</td>
									</tr>

									<tr>
										<td class="h16">金额（小写）</td>
										<td class="s14">{{one.total}}</td>
										<td colspan="1.5" rowspan="2">
											<span class="h16">原借款:</span>
											<span class="liuk s14"></span>
											<span class="h16">元</span>
										</td>
										<td colspan="2" rowspan="2">
											<div class="tb-flex">
												<span class="tb-flex">
													<div class="h16">应</div>
													<div class="tbtext">退补</div>
													<div class="h16 w40">差额:</div>
												</span>
												<span class="liuk s14"></span>
												<span class="h16">元</span>
											</div>
										</td>
									</tr>

									<tr>
										<td class="h16">金额（大写）</td>
										<td class="s14">{{convertNumberToChinese(one.total)}}</td>
									</tr>
								</tbody>
							</table>


							<div class="table-b h16">
								<div class="table-item">会计主管</div>
								<div class="table-item">复核</div>
								<div class="table-item">出纳</div>
								<div class="table-item">报销人</div>
								<div class="table-item">领款人</div>
							</div>
						</div>
					</section>
				</div>

			</div>
		</div>
		<div class="mt20" style="display: flex;align-items: center;justify-content: center;">
			<el-button type="primary" round v-print="print">立即打印</el-button>
			<!-- <el-button type="primary" round @click="handlePdf('#printArea')">生成PDF</el-button> -->
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			rowData: {
				type: Object,
				required: true
			},
		},
		data() {
			return {
				htmlTitle: "",
				listData: [],
				print: {
					id: "printArea",
					popTitle: "报销单", // 打印配置页上方标题
					extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
					preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
					previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
					previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
					zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
					// that: this,
					previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
					previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
					beforeOpenCallback() {}, // 开启打印前的回调事件
					openCallback: this.close, // 调用打印之后的回调事件
					closeCallback(val) {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
					url: "",
					standard: "",
					extraCss: "",
				},
			}
		},
		created() {
			this.initData();
		},
		methods: {
			close() {
				setTimeout(() => {
					this.$emit('close');
				}, 1000)
			},
			// 初始化数据
			initData() {
				this.setFiveArray(this.rowData.recordList);
				this.htmlTitle = this.rowData.nickName + "报销单据";
			},
			// 将一维数组转换为指定格式的二维数组
			setFiveArray(list) {
				const listResult = []; // 最终返回的二维数组
				for (let i = 0; i < Math.ceil(list.length / 7); i++) {
					let startIdx = i * 7;
					let endIdx = (i + 1) * 7;
					let subList = list.slice(startIdx, endIdx);
					let total = subList.reduce((acc, item) => acc + item.amount, 0);
					// 补齐五条数据
					if (subList.length < 7) {
						let missingCount = 7 - subList.length;
						for (let j = 0; j < missingCount; j++) {
							subList.push({
								amount: "",
								id: "",
								projectDictId: "",
								projectName: "",
								purpose: "",
							});
						}
					}
					listResult.push({
						list: subList,
						total: total.toFixed(2), // 保留两位小数
					});
				}
				this.listData = listResult;
				// this.convertPrice();
			},
			// 计算总价
			convertPrice(val) {
				// 获取列表数据
				let list = this.listData;
				// 遍历每一组数据
				list.forEach((v) => {
					v.list.forEach((res) => {
						if (typeof res.amount === 'number') {
							res.amount = res.amount.toFixed(2).toString();
							if (res.amount.indexOf(".") > -1) {
								res.amount = res.amount.replace(".", "");
								if (res.amount.length < 10) {
									var num = 10 - res.amount.length;
									for (let i = 0; i < num; i++) {
										res.amount = " " + res.amount;
									}
								}
							}
						}
					});
				});
			},
			// 处理单据数
			handleDtlCnt(val) {
				let cnt = 0;
				val.forEach(item => {
					if (item.id !== null && item.id !== undefined && item.id !== "") {
						cnt++;
					}
				});
				return cnt;
			},
			// 取消操作
			cancel() {
				this.$emit("cancel");
			},

		},

	}
</script>

<style lang="scss" scoped>
	@page {
		size: auto;
		margin: 0mm;
	}

	.app-container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		border-radius: 5px;
		background-color: #999999;
	}

	.page-a5 {
		width: 210mm;
		height: 148mm;
		margin-bottom: 10px;
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	section {
		width: 100%;
		height: 148mm;
		position: relative;
		padding-left: 25px;
		display: flex;
		color: #2a92df;
	}

	.zd-line {
		width: 20px;
		height: 148mm;
		position: relative;

		.zd-line-text {
			position: absolute;
			top: 50%;
			left: -30%;
			transform: translateY(-50%);
			font-size: 14px;
			color: #2a92df;

			.zd-line-text-item {
				margin-bottom: 40px;
				background-color: #ffffff;
			}

			.zd-line-text-item:last-child {
				margin-bottom: 0px;
			}
		}
	}

	.zd-line::before {
		content: "";
		width: 1px;
		height: calc(100% - 5px);
		position: absolute;
		left: 0;
		top: 5px;
		// border-width: 1px;
		// border-style: dashed;
		// border-color: #2a92df;
		padding-top: 1px;
		background: repeating-linear-gradient(to bottom, #2a92df 0px, #2a92df 4px, transparent 0px, transparent 14px) !important;
		-webkit-print-color-adjust: exact;
	}

	.main-box {
		width: 100%;
		margin: 0 auto;
		margin-left: -20px;
		position: relative;
	}


	.b1 {
		width: 241px;
		font-family: "黑体";
		margin: 0 auto;
		margin-top: 34px;
		text-align: center;
		position: relative;

		.tite {
			text-align: center;
			font-size: 30px;
			font-weight: bold;
			color: #2a92df;
		}

		.tite-line {
			height: 2px;
			margin-top: 2px;
			border-bottom: 1px solid #2a92df;
		}
	}

	.bh {
		position: absolute;
		right: 15px;
		top: 15px;
		color: #2a92df;
		font-size: 12px;
	}

	.table-t {
		width: calc(100% - 50px);
		margin: 0 auto;
		margin-top: 25px;
		font-family: "黑体";
		display: flex;
		justify-content: space-between;

		.table-item {
			flex: 1;
		}

		.table-item-flex {
			display: flex;
			justify-content: center;

			.table-date {
				text-align: center;
			}
		}

		.text {
			text-align: right;

			.text-line {
				width: 40px;
				position: relative;
				display: inline-block;
				text-align: center;
			}

			.text-line::before {
				content: '';
				width: 30px;
				position: absolute;
				left: 0;
				bottom: 0px;
				width: 100%;
				height: 1px;
				background-color: #2a92df;
			}
		}
	}

	table {
		width: calc(100% - 50px);
		table-layout: fixed;
		margin: 0 auto;
		margin-top: 4px;
		border: 1px solid;
		border-spacing: 0;
		border-collapse: collapse;
	}

	tr {
		height: 39px !important;
	}

	td {
		width: 130px;
		padding: 5px;
		text-align: center;
		border: 1px solid;
	}

	.tc {
		text-align: left;
	}

	.h16 {
		font-family: '黑体', sans-serif !important;
		font-size: 16px !important;
	}

	.s14 {
		font-family: '宋体', sans-serif !important;
		font-size: 13px !important;
	}

	.liuk {
		width: 26px;
		display: inline-block;
		text-align: center;
	}

	.tb-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tbtext {
			width: 20px;
			font-size: 12px;
			line-height: 15px;
		}
	}

	.table-b {
		width: calc(100% - 50px);
		margin: 0 auto;
		margin-top: 12px;
		font-family: "黑体";
		display: flex;
		justify-content: space-between;

		.table-item {
			flex: 1;
		}

		.table-item-flex {
			display: flex;
			justify-content: center;

			.table-date {
				flex: 1;
				text-align: center;
			}
		}

		.text {
			text-align: right;

			.text-line {
				width: 40px;
				position: relative;
				display: inline-block;
				text-align: center;
			}

			.text-line::before {
				content: '';
				width: 30px;
				position: absolute;
				left: 0;
				bottom: 0px;
				width: 100%;
				height: 1px;
				background-color: #2a92df;
			}
		}
	}
</style>